<template>
  <el-container>
    <el-header style="height: 40px;margin: 20px;">
      <el-col :span="18" :offset="5">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="标题">
            <el-input v-model="formInline.title" placeholder="标题/标签/作者"></el-input>
          </el-form-item>
          <el-form-item label="作者ID">
            <el-input v-model="formInline.authorId" placeholder="作者ID"></el-input>
          </el-form-item>
          <el-form-item label="作品ID">
            <el-input v-model="formInline.id" placeholder="作品ID"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-header>
    <el-main style="padding: 0;">
      <el-table :data="tableData" border :max-height="tableHeight" @sort-change="orderChange" stripe>
        <el-table-column prop="id" label="ID" width="80"> </el-table-column>
        <el-table-column label="imgUrl" width="180">
          <template slot-scope="scope">
            <el-image style="height: 60px;" :src='imgUrl(scope.row.imgUrl)' :preview-src-list="imgUrlList">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="collectNum" label="收藏数" width="80" sortable="custom"> </el-table-column>
        <el-table-column prop="likeNum" label="喜欢数" width="80" sortable="custom"> </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="160" sortable="custom"> </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">同步</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer style="height: 50px;">
      <div class="pagination">
        <el-pagination @current-change="currentPageChange" :current-page="currentPage" @prev-click="prev" @next-click="next"
          :page-size="pageSize" layout="total, sizes,prev, pager, next" :total="total" :page-count="pageCount"
          background prev-text="上一页" next-text="下一页" @size-change="handleSizeChange">aaa
        </el-pagination>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
  import {getPicPage,delPic,syncOnePic} from '../../api/aliyun.js';
  export default {
    data() {
      return {
        //表单数据
        formInline: {
          title: '',
          authorId: '',
          id:''
        },
        //默认显示页面为1
        currentPage: 1,
        //每页的数据条数
        pageSize: 10,
        //每页的数据源
        tableData: [],
        //总条数
        total: 0,
        //总页数
        pageCount: 1,
        //排序
        orderBys: 'updateTime desc'
      };
    },
    mounted() {
      this.getData();
    },
    computed: {
      //大图预览的图片列表
      imgUrlList() {
        let a = [];
        let urls = this.$store.state.imgUrl;
        for (let i = 0; i < this.tableData.length; i++) {
          a.push(urls + this.tableData[i].imgUrl);
        }
        return a;
      },
      //自适应表格高度
      tableHeight() {
        return (window.innerHeight - 150) + 'px';
      },
      imgUrl(){
        return function(url){
          return this.$store.state.imgUrl + url;
        };
      }
    },
    methods: {
      handleEdit(index, row) {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 1, 0, 0.7)'
        });
        // this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
        //   loadingInstance.close();
        // });
        syncOnePic(row.id).then(response => {
          loading.close();
          if (!response.success) {
            this.$message.error(response.msg);
          }else{
            this.$message.success('同步成功');
            this.getData();
          }
        });
      },
      handleDelete(index, row) {
        delPic(row.id).then(response => {
          if (!response.success) {
            this.$message.error(response.msg);
          }else{
            this.$message.success('删除成功');
            this.getData();
          }
        });
      },
      //监听排序变化
      orderChange(column) {
        console.log(column);
        if (column.order == null) {
          return;
        }
        this.orderBys = column.prop + ' ' + column.order.substring(0, column.order.indexOf('c') + 1);
        this.currentPage = 1;
        this.getData();
      },
      getData() {
        //表单数据
        let param = {
          pageNo: this.currentPage,
          pageSize: this.pageSize
        };
        if (this.formInline.authorId.trim().length > 0) {
          param.authorId = this.formInline.authorId.trim();
        };
        if (this.formInline.title.trim().length > 0) {
          param.title = this.formInline.title.trim();
        };
        if (this.formInline.id.trim().length > 0) {
          param.id = this.formInline.id.trim();
        };
        //排序
        param.orderBys = this.orderBys;
        getPicPage(param).then(response => {
          console.log(response);
          if (!response.success) {
            this.$message.error(response.msg);
          } else {
            this.tableData = response.data.rows;
            this.total = response.data.total;
            this.pageCount = response.data.pageNum;
          }
        });
      },
      //页数改变
      currentPageChange: function(currentPage) {
        this.currentPage = currentPage;
        this.getData();
      },
      prev() {
        this.currentPage--;
      },
      next() {
        this.currentPage++;
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getData();
      },
      onSubmit() {
        this.currentPage = 1;
        this.getData();
      }
    }
  };
</script>

<style>
  .el-table td {
    padding: 5px 0;
  }
</style>
